<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-22 01:23
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div style="overflow-x: hidden">
    <x-attrs-header
      url="https://www.antdv.com/components/form-model-cn/#API"
      title="表单配置"
      @change="searchChangeHandler"
    />
    <x-render-form
      ref="xRenderDesignFormProps"
      v-model="xDesignForm.formPropsData"
      :form-options="activeFormOptions"
      @change="formChangeHandler"
    >
    </x-render-form>
  </div>
</template>

<script>
import XAttrsHeader from '../XDesignAttrsHeader'
import FormOptions from './options'
import { cloneDeep } from 'lodash'

export default {
  name: 'XDesignFormProps',
  inject: ['xDesignForm'],
  components: {
    XAttrsHeader
  },
  computed: {
    activeFormOptions: {
      get() {
        return cloneDeep(FormOptions)
      }
    }
  },
  methods: {
    formChangeHandler({ value, prop }) {
    },
    searchChangeHandler(keyword) {
      const formOptions = cloneDeep(FormOptions)
      const showProps = []
      const hideProps = []
      for (const option of formOptions) {
        if (!option.formItem) {
          continue
        }
        const formItem = option.formItem
        if ((!!formItem.prop && formItem.prop.includes(keyword)) || (!!formItem.label && formItem.label.includes(keyword)) || (!!formItem.extra && formItem.extra.includes(keyword))) {
          showProps.push(formItem.prop)
        } else {
          hideProps.push(formItem.prop)
        }
      }
      const xRenderDesignFormProps = this.$refs.xRenderDesignFormProps
      xRenderDesignFormProps.showFields(...showProps)
      xRenderDesignFormProps.hideFields(...hideProps)
    }
  }
}
</script>

